<template>
  <div class="pt-20">
    <div class="w100 h-40 br-20 bgff pl-16 pr-10 rowsb rowsm mb-16">
        <el-input v-model="name" placeholder="输入姓名学号" class="w-400 input"></el-input>
        <div class="w-60 h-30 br-15 rowsc rowsm" style="background-color: #E33636;" @click="handelSelect">
            <img src="../../../static/img/icon_osbc.png" class="w-15 h-15" alt="">
        </div>
    </div>

    <div class="w100 h-50 rows rowsm">
        <div class="rowsc rowsm br-10 h100 fs-14" style="width: 33%;" @click="handelGetList(0)" :style="active == 0 ? 'background: #E33636;color: #fff;' : 'background: #fff;color: #888;'">总成绩</div>
        <div class="rowsc rowsm br-10 h100 fs-14" style="width: 34%;" @click="handelGetList(1)" :style="active == 1 ? 'background: #E33636;color: #fff;' : 'background: #fff;color: #888;'">实践成绩x80%</div>
        <div class="rowsc rowsm br-10 h100 fs-14" style="width: 33%;" @click="handelGetList(2)" :style="active == 2 ? 'background: #E33636;color: #fff;' : 'background: #fff;color: #888;'">理论成绩x20%</div>
        <!-- <div class="rowsc rowsm" style="width: 10%;" @click="isShowFilter = true">
            <img src="../../../static/img/icon_sx.png" class="w-20 h-20" alt="">
        </div> -->
    </div>

    <div class="w100 rows rowsm bgff h-36 mt-10">
        <div class="rowsc rowsm col000 fw-b fs-16" style="width: 20%;">排名</div>
        <div class="rowsc rowsm col000 fw-b fs-16" style="width: 20%;">学院</div>
        <div class="rowsc rowsm col000 fw-b fs-16" style="width: 20%;">姓名</div>
        <div class="rowsc rowsm col000 fw-b fs-16" style="width: 20%;">班级</div>
        <div class="rowsc rowsm col000 fw-b fs-16" style="width: 20%;">分数</div>
    </div>
    <div class="w100 h-48 rows rowsm" v-for="(item,index) in list" :key="index" :style="index % 2 == 0 ? 'background-color: #E3E3E3;' : 'background-color: #fff;'">
        <div class="rowsc rowsm col000 fs-16" style="width: 20%;">{{item.rank}}</div>
        <div class="rowsc rowsm col000 fs-16" style="width: 20%;">{{item.xyName}}</div>
        <div class="rowsc rowsm col000 fs-16" style="width: 20%;">{{item.name}}</div>
        <div class="rowsc rowsm col000 fs-16" style="width: 20%;">{{item.bjName}}</div>
        <div class="rowsc rowsm col000 fs-16" style="width: 20%;">{{item.dfCount}}</div>
    </div>
 <el-pagination
      style="margin-top:20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage4"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog :visible.sync="isShowFilter" width="1000px">
        <div class="w100 rowsc rowsm fs-14 col333 fw-b mb-20">数据筛选范围</div>
        <div class="w100 pl-20 pr-20">
            <div class="w100 rowsb rowsm h-40 mb-10 br-10" style="background-color: #F7F7F7;">
                <div class="h100 rows rowsm pl-30 fs-12 col333 br-10" style="width: 50%;background-color: #F7F7F7;">学院</div>
                <div class="h100 rows rowsm pl-30 fs-12 col333 br-10" style="width: 50%;background-color: rgba(227, 54, 54, .1);">
                    <el-select v-model="schoolValue" placeholder="请选择">
                    <el-option
                      v-for="item in school"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
            </div>

            <div class="w100 rowsb rowsm h-40 mb-10 br-10" style="background-color: #F7F7F7;">
                <div class="h100 rows rowsm pl-30 fs-12 col333 br-10" style="width: 50%;background-color: #F7F7F7;">学院</div>
                <div class="h100 rows rowsm pl-30 fs-12 col333 br-10" style="width: 50%;background-color: rgba(227, 54, 54, .1);">
                    <el-select v-model="schoolValue" placeholder="请选择">
                    <el-option
                      v-for="item in school"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
            </div>

            <div class="w100 rowsb rowsm h-40 mb-10 br-10" style="background-color: #F7F7F7;">
                <div class="h100 rows rowsm pl-30 fs-12 col333 br-10" style="width: 50%;background-color: #F7F7F7;">学院</div>
                <div class="h100 rows rowsm pl-30 fs-12 col333 br-10" style="width: 50%;background-color: rgba(227, 54, 54, .1);">
                    <el-select v-model="schoolValue" placeholder="请选择">
                    <el-option
                      v-for="item in school"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
            </div>
        </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        active:0,
        isShowFilter:false,
        school:['北京大学','浙江大学','山东大学'],
        schoolValue:'',
        list:[],
        name:'',
         total:10,
        currentPage4:1,
        // 分页
        pagination:{
          pageNum:1,
          pageSize:10
        }
    };
  },
  watch: {},
  computed: {},
  methods: {
    handelSelect(){
       this.currentPage4 = 1
        this.handleCurrentChange(1)
    },
    handelGetList(val){
     this.currentPage4 = 1
      this.active = val
      this.handleCurrentChange(1)
    },
    getList(){
      let data = {
        isSort:+this.active + 1,
        sortType:'desc',
        stNumberOrName:this.name
      }
      this.$axios.post(`prouser/listPhb?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{...data}).then(res => {
        if(res.data.code != 200) return this.$notify({
          title: '提示',
          message: res.data.msg
        });
        let {rows} = res.data
        this.list = rows
         this.total = res.data.total
      })
    },
     handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getList()
    },
     handleCurrentChange(val) {
       
        this.pagination.pageNum = val
        this.getList()
      },

  },
  created() {
    this.getList()
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
  .input /deep/ .el-input__inner  {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 20px;
    // text-align: right;
  }
  /deep/.el-pager li.active{
  color: #E33636;
}
/deep/.el-pager li:hover{
  color: #E33636;
}
</style>